<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>许愿墙</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .xyq {
            width: 1200px;
            margin: 80px auto 10px auto;
            color: #33af44;
        }

        .bj {
            background: #f7f7f7;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }

        .main {
            background: #FFFFFF;
            border-radius: 5px;
            padding: 20px 75px;
            margin: 10px auto;
        }

        ul {
            list-style: none;
            clear: both;
        }

        .btn {
            display: inline-block;
            background: #6ccc6b;
            color: #FFFFFF;
            height: 30px;
            line-height: 30px;
            width: 100px;
            border: 1px solid #6ccc6b;
            border-radius: 5px;
            margin: 10px;
            cursor: pointer;
            text-decoration: none;
        }

        li {
            float: left;
            width: 160px;
            height: 180px;
            margin: 10px;
            text-align: left;
            padding: 15px;
            border-radius: 2px;
            background: #77ee77;

        }

        ul:after, .title:after {
            content: '';
            display: block;
            clear: both;
        }

        .title {
            line-height: 40px;
            font-weight: initial;
            border-bottom: 1.5px dotted #f5f5f5;
        }

        .title h4 {
            float: left;
            line-height: 40px;
            font-weight: initial;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 110px;
            margin-right: 10px;
        }

        .title a {
            float: left;
            display: inline-block;
            width: 15px;
            margin-left: 5px;
        }

        .title a i {
            font-size: 15px;
            color: #000000;
        }

        p {
            line-height: 25px;
            display: inline-block;
            height: 150px;
            overflow: hidden;
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h2 class="xyq">许愿墙</h2>
<div class="bj">
    <div class="box">
        <div class="main">
            <a href="add.php" class="btn">我要许愿</a>
            <ul>
                <?php
                // 创建连接
                $conn = new mysqli("localhost", "root", "root", "xyq");
                if ($conn->connect_error) {
                    die("连接失败: " . $conn->connect_error);
                }
                $result = $conn->query("SELECT * FROM `xyq`.`xyq` ORDER BY 1 DESC;");
                if ($result->num_rows > 0) {
                    while ($row = $result->fetch_assoc()) {
                        ?>
                        <li style="background: <? echo $row['color'] ?>">
                            <div class="title">
                                <h4><? echo $row["name"] ?></h4>
                                <a href="edit.php?id=<? echo $row['id'] ?>">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                                <a href="verify_del.php?id=<? echo $row['id'] ?>">
                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </a>
                            </div>
                            <p><? echo $row["text"] . "<br>" . $row["time"] ?></p>
                        </li>
                        <?php
                    }
                } else {
                    echo "暂无任何许愿";
                }
                $conn->close();
                ?>
            </ul>
        </div>
    </div>
</div>
</body>
</html>